<div class="col-sm-12 small text-muted">
  You can select which endpoint should be part of this group by moving them to the associated endpoints table. Simply click on any endpoint entry to move it from one table to the
  other.
</div>
<div class="col-sm-12" style="margin-top: 20px;">
  <!-- available-endpoints -->
  <div class="col-sm-6">
    <div class="text-center small text-muted">Available endpoints</div>
    <div style="margin-top: 10px;">
      <group-association-table
        loaded="$ctrl.loaded"
        page-type="$ctrl.pageType"
        table-type="available"
        retrieve-page="$ctrl.getPaginatedEndpoints"
        dataset="$ctrl.endpoints.available"
        entry-click="$ctrl.associateEndpoint"
        pagination-state="$ctrl.state.available"
        empty-dataset-message="No endpoint available"
        tags="$ctrl.tags"
        show-tags="true"
        groups="$ctrl.groups"
        show-groups="true"
        has-backend-pagination="true"
      ></group-association-table>
    </div>
  </div>
  <!-- !available-endpoints -->
  <!-- associated-endpoints -->
  <div class="col-sm-6">
    <div class="text-center small text-muted">Associated endpoints</div>
    <div style="margin-top: 10px;">
      <group-association-table
        loaded="$ctrl.loaded"
        page-type="$ctrl.pageType"
        table-type="associated"
        retrieve-page="$ctrl.getPaginatedEndpoints"
        dataset="$ctrl.endpoints.associated"
        entry-click="$ctrl.dissociateEndpoint"
        pagination-state="$ctrl.state.associated"
        empty-dataset-message="No associated endpoint"
        tags="$ctrl.tags"
        show-tags="true"
        groups="$ctrl.groups"
        show-groups="true"
        has-backend-pagination="true"
      ></group-association-table>
    </div>
  </div>
  <!-- !associated-endpoints -->
</div>
